<template>
  <div :class="[ns.b()]">
    <ul>
      <li v-for="item in options" :key="item.value" :class="[{ active: state.value === item.value }]" @click="change(item.value)">
        <span>{{ item.label }}</span>
      </li>
      <!-- <li class="active">
        <span>跟进记录</span>
      </li> -->
    </ul>
    <div v-if="$slots.default"><slot /></div>
  </div>
</template>
<script lang="ts">
  export default { name: 'tabsMenuComponent' }
</script>
<script setup lang="ts">
  // ui层和业务层，暴露一些方法
  import { useUamespace } from '@/hooks/use-namesapce'
  // interface
  import type { TabsMenuInterface, EmitsInterface } from './types/props'
  /**
   * props
   */
  const props = withDefaults(defineProps<TabsMenuInterface>(), {
    options: () => [],
  })
  /**
   * emit
   */
  const emit = defineEmits<EmitsInterface>()

  const state = reactive({
    value: props.value,
  })

  /**
   * change
   */
  const change = (value: string | number) => {
    state.value = value
    emit('change', value)
  }

  const ns = useUamespace('tabs-menu')
</script>
<style lang="scss" scoped>
  @include b(tabs-menu) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    ul {
      display: flex;
      align-items: center;
      li {
        cursor: pointer;

        &:after {
          content: '';
          margin-top: 10px;
          display: block;
          border-bottom: 2px solid white;
        }
        + li {
          margin-left: 40px;
        }
      }
      .active {
        span {
          color: $primary;
        }
        &:after {
          border-color: $primary;
        }
      }
      span {
        line-height: 1;
      }
    }
  }
</style>
